<template>
  <div id="WarePick2">
    <root name="WarePick2">
      <SafeHeader
        v-bind="{
          title: '波次拣货',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 波次 </v-tab>
        <v-tab class="wms-tab"> 拣货 </v-tab>
        <!-- 任务页面 -->
        <v-tab-item  class="task" transition="slide-y-transition" @scroll="onScroll" ref="scrollDiv">
          <v-container class="task_list white mt-2"  >
            <v-row>
              <v-col cols="8" >
                  <v-text-field
                   placeholder="输入物料编码查询" style="height: 50px" v-model="serchData.keyWords">
                  </v-text-field>
              </v-col>
              <v-col cols="4">
                  <v-btn small dark depressed color="primary" @click="getWaveData" style="min-width: 100px; height: 45px">查询</v-btn>
              </v-col>
            </v-row>
            <div v-if="waveList[0]"  id="scroll-target"  >
              <v-container
                ref="px-1"
                v-for="(item, index) in waveList" :key="index" class="px-1"

              >
              <v-row v-scroll.self:="onScroll"  >
                <v-col cols="12" class="pa-0 pb-2">
                  <v-card outlined style="background-color: #f2f3f5">
                    <v-card-subtitle class="list_content pa-1">
                      <v-row>
                        <v-col cols="2" class="pr-2 d-flex justify-center align-center">
                          <v-row>
                            <v-col class="pr-2 d-flex justify-center align-center">
                             {{ index + 1}}
                              <v-checkbox v-model="item.flag"></v-checkbox>
                            </v-col>
                          </v-row>
                          <v-divider vertical></v-divider>
                        </v-col>
                        <v-col cols="10">
                          <v-row
                            class="
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="4" class="py-1 card-lable"
                              >分配时间</v-col
                            >
                            <v-col class="py-1 card-value">{{
                              item.allottedTime
                            }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              pa-0
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="4" class="py-1 card-lable"
                              >物料编码</v-col
                            >
                            <v-col class="py-1 card-value">{{
                              item.itemCode
                            }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              pa-0
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="4" class="py-1 card-lable"
                              >物料规格</v-col
                            >
                            <v-col class="py-1 card-value">{{
                              item.spec
                            }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              pa-0
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="4" class="py-1 card-lable"
                              >物料名称</v-col
                            >
                            <v-col class="py-1 card-value">{{
                              item.itemName
                            }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              pa-0
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="4" class="py-1 card-lable"
                            >库位</v-col
                            >
                            <v-col class="py-1 card-value">{{
                                item.cellCodes
                              }}</v-col>
                          </v-row>
                          <v-row
                            class="
                              pa-0
                              d-flex
                              flex-row
                              justify-space-between
                              wms-v-row
                            "
                          >
                            <v-col cols="4" class="py-1 card-lable">
                              数量({{item.invQty}})

                            </v-col>
                            <v-col class="py-1 card-value"
                              >{{ item.pickQuantity }} /
                              {{ item.allottedQuantity }}</v-col
                            >
                          </v-row>
                          <!-- <v-divider></v-divider> -->
                          <v-row align="center">
                            <v-col
                              cols="12"
                              class="
                                py-0
                                mt-2
                                d-flex
                                align-center
                                justify-center
                                font-weight-bold
                              "
                            >
                              <v-btn
                                rounded
                                small
                                color="#193690"
                                dark
                                @click="picking(item)"
                                class="font-weight-bold"
                                style="min-width: 150px; height: 30px"
                                >拣货</v-btn
                              >
                            </v-col>
                          </v-row>
                          </v-col>
                        </v-row>
                    </v-card-subtitle>
                  </v-card>
                </v-col>
              </v-row>
            </v-container>
            </div>

            <v-row v-else>
              <v-col cols="12" class="text-center">暂无未完成的波次</v-col>
            </v-row>
          </v-container>
         <br />
        <br />

        <div v-show="hidshow" class="footer">
          <v-bottom-navigation height="60" style="background: transparent; box-shadow: none">
            <v-row class="pa-0 ma-0 justify-center" style="background: transparent">
              <v-col
                cols="12"
                class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2 py-1"
                style="background: transparent"
              >
                <v-btn
                  class="wms-submit-btn"
                  dark
                  block
                  color="#193690"
                  style="
                    height: 100%;
                    border-radius: 10px;
                    color: #fff !important;
                  "
                  @click="OnSubmit"
                >提交</v-btn>
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
        </v-tab-item>
        <!-- 拣货页面 -->
        <v-tab-item transition="slide-y-transition" class="pickingWrap">
          <v-container class="mt-2 pa-0">
            <v-card class="pickingCard" height="238">
              <v-row class="ma-0 pa-3" style="height: 38px">
                <v-col cols="12" class="d-flex justify-space-between">
                  <div
                    class="d-flex justify-space-between align-center"
                    style="width: 100%"
                  >
                    <div class="pickingCard_title">
                      {{ currentWaveItem.itemName }}
                    </div>
                    <div class="pickingCard_title">
                      待拣容器数量：{{ currentWaveItem.currentUnPickNum }}
                    </div>

                  </div>
                </v-col>
              </v-row>
              <v-divider></v-divider>
              <v-row class="ma-0 pa-0">
                <v-col cols="12">
                  <v-data-table
                    fixed-header
                    hide-default-header
                    height="200"
                    :headers="recommendheaders"
                    :items="recommendList"
                    mobile-breakpoint="1"
                    @click:row="clickItem"
                    class="elevation-1 boxCodeDialog_card_table"
                    hide-default-footer
                    item-key="lotCode"
                  >
                    <template v-slot:[`item.state`]="{ item }">
                      <v-simple-checkbox
                        v-model="item.state"
                        disabled
                      ></v-simple-checkbox>
                    </template>
                    <!-- <template v-slot:[`item.state`]="{ item }">
                      <v-chip small class="ma-0" color="#627AEC" label dark>
                        {{ item.state == 2 ? "已拣" : "未拣" }}
                      </v-chip>
                    </template> -->
                  </v-data-table>
                </v-col>
              </v-row>
            </v-card>
          </v-container>
          <v-container class="mt-3 py-1 px-0 pickingCard-bottom">
            <v-form v-model="pickingForm" ref="pickingForm" class="pickingForm">
              <v-row class="pa-1 mt-2">
                <v-col cols="12">
                  <v-text-field
                    label="拣货容器"
                    @keydown.13="handleEnterCtCode"
                    clearable
                    dense
                    v-model="pickForm.srcBoxCode"
                    placeholder="请输入或扫描拣货容器码"
                  ></v-text-field>
                </v-col>
                <v-col cols="12 mt-1">
                  <v-text-field
                    id="id-pickQty"
                    :disabled="targetCtCodeDisabled"
                    label="拣货数量"
                    dense
                    type="number"
                    v-model="pickForm.actQuantity"
                    placeholder="请输入需要拣货的数量"
                  >
                    <template v-slot:append>
                      <v-btn
                        rounded
                        outlined
                        small
                        @click="openDiffQtyDig"
                        color="#193690"
                        >差异录入</v-btn
                      ></template
                    >
                  </v-text-field>
                </v-col>
              </v-row>
            </v-form>
          </v-container>
          <v-container
            style="font-size: 13px; color: #979899"
            class="py-1 mb-15"
          >
            提示：整箱拣货只需要扫描拣货容器；分箱拣货需要额外扫描目标容器及输入需要拣货的数量
          </v-container>

          <div v-show="hidshow" class="footer">
            <v-bottom-navigation
              height="60"
              style="background: transparent; box-shadow: none"
            >
              <v-row
                class="pa-0 ma-0 justify-center"
                style="background: transparent"
              >
                <v-col
                  cols="12"
                  class="
                    pa-0
                    ma-0
                    d-flex
                    justify-space-between
                    align-center
                    mb-2
                    px-2
                    py-1
                  "
                  style="background: transparent"
                >
                  <v-btn
                    class="wms-submit-btn btn-left"
                    color="#193690"
                    dark
                    outlined
                    style="
                      height: 100%;
                      border-radius: 10px;
                      width: 30%;
                      color: #193690 !important;
                    "
                    @click="pickingReturn"
                    >返回
                  </v-btn>
                  <v-btn
                    class="wms-submit-btn"
                    style="
                      background-color: #193690;
                      height: 100%;
                      border-radius: 10px;
                      width: 65%;
                    "
                    @click="pickingSubmit"
                    >提交</v-btn
                  >
                </v-col>
              </v-row>
            </v-bottom-navigation>
          </div>
          <v-dialog v-model="msgDialog" persistent max-width="290">
            <v-card class="boxCodeDialog_card">
              <v-card-title
                class="boxCodeDialog_card_title msgDialog_card_title"
              >
                差异数
              </v-card-title>
              <v-card-text>
                <v-text-field
                  label="差异多"
                  clearable
                  dense
                  v-model="pickForm.diffMoreQty"
                  placeholder=""
                ></v-text-field>
                <v-text-field
                  label="差异少"
                  clearable
                  dense
                  v-model="pickForm.diffLessQty"
                  placeholder=""
                ></v-text-field>
              </v-card-text>
              <v-card-actions>
                <v-btn block dark color="#ffc352" @click="saveDiffQty">
                  保存
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-tab-item>
      </v-tabs>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
import _ from "lodash";
import { apiList } from "@/static/apiList";
import Storage from "@/utils/storage.js";

export default {
  name: "WarePick2",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      tab: null,
      // tab1 出库任务表单
      // outBillForm: {
      //   billId: "", //出库任务id
      //   billNo: "", // 出库任务号
      //   state: "", // 状态
      //   createTime: "", // 计划日期
      //   details: [], //出库任务明细列表
      // },
      // 查询参数
      serchData:{
        wareId: localStorage.getItem("wareId"),
        keyWords:"",
        pageNumber: '',
        pageSize: 800,

      },
      cellHeight: 133.3333282470703,
      cacheList: [],
      waveList: [

        // {
        //   code: "B",
        //   createTime: "C",
        //   totalBillCount: 13,
        //   totalSkuCount: 12,
        // },
      ],

      // 当前选中的SO明细
      currentWaveItem: {},

      // 拣货任务
      recommendList: [],

      // 推荐库位表头
      recommendheaders: [
        { text: "推荐库位", value: "cellCode" },
        { text: "拣货任务id", value: "soDetailId" },
        { text: "推荐容器", value: "boxCode" },
        { text: "拣货数量", value: "pickQuantity" },
        { text: "状态", value: "state" },
        { text: "itemCode", value: "itemCode" },


      ],

      // 选择的容器多批次列表
      pickingForm: true,

      pageNumber: 0,
      // 需要提交的数据
      pickForm: {
        pickTaskId: "", //拣货任务id
        pickQuantity: "", //拣货数量 理论推荐的数量
        srcBoxCode: "", //来源容器
        toBoxCode: "", //目标容器
        actQuantity: "", //实际输入的拣货数量  用于校验
        isAllPick: true,
        diffMoreQty: "",
        diffLessQty: "",
      },

      targetCtCodeDisabled: true,
      msgDialog: false, // 原因弹框
      msgData: "", // 原因详情
      details: [], //勾选的集合
      // 单项情况--勾选控制
      isCheck : false,
      id: [],
      offsetTop:0
    };
  },
  methods: {
    onScroll: function (e) {
      this.$nextTick(() => {
        let clientHeight = this.$refs.scrollDiv.$el.clientHeight;
        let scrollHeight = this.$refs.scrollDiv.$el.scrollHeight;
        let scrollTop = this.$refs.scrollDiv.$el.scrollTop;
        let distance = 50;
        //触发条件
        if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
          this.pageNumber += 10;
          let newArr = this.cacheList.slice(this.pageNumber, this.pageNumber + 10);
          console.log(newArr, 'newArr');
          for (let i = 0; i < newArr.length; i++) {
            this.waveList.push(newArr[i]);
        }
          console.log(this.waveList)
        }

      })
    },
    //添加勾选的id
    addData(item) {
      this.id.push(item.waveDetailId)
      console.log(this.id)
    },


    removeMenu() {
      this.id.forEach(menu => {
        let index = this.waveList.findIndex(item => {
          return item.waveDetailId === menu
          // eslint-disable-next-line no-unreachable
        })
        console.log(index, 'indexindexindexindex')
        this.waveList.splice(index, 1);
      })
    },


    //提交
    OnSubmit() {

      // arr = [{id:1},{id:2}]


      //过滤已选择
      let waveList = this.waveList.filter(item => {
        return item.flag;
      });
      //获取id
      waveList.forEach(item => {
          this.id.push(item.waveDetailId)
        }
      )
      this.overlay = true;

      wms
        .get({
          url: "/pick/tasks/wavePick",
          data: {
            waveIds: this.id.join(","),
            wareId: localStorage.getItem("wareId")
          },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            alert("拣货成功");
            // 刷新页面
            this.overlay = false;
            this.removeMenu();
            this.id = [];
            // window.location.reload();
          } else {
            this.overlay = false;
            // this.removeMenu();
            this.id = []
            alert(res.data.message);
          }
        });
    },

    // 拣货按钮
    // 通过物料编码this.currentWaveItem.itemCode 查询推荐库位
    picking(item) {
      this.overlay = true;
      //Tab跳转
      this.tab = 1;
      //待拣的物料详情
      this.currentWaveItem = item;
      this.currentWaveItem.currentUnPickNum = 0;
      //获取拣货任务
      wms
        .get({
          url: "/pick/tasks/findByWaveId",
          data: { waveId: item.waveDetailId },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            // console.log(JSON.stringify(res.data));
            let pickData = res.data.data.list;
            // for (let i = 0; i < pickData.length; i++) {
            //   //统计待拣的任务数量
            //   if (pickData[i].state == 2) {
            //     pickData[i].state = true;
            //   } else {
            //     pickData[i].state = false;
            //     this.currentWaveItem.currentUnPickNum += 1;
            //   }
            // }
            this.recommendList = pickData;
            // console.log(JSON.stringify(this.recommendList));
            this.overlay = false;
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },
    // -----------------------任务页面 E -------------------

    // -----------------------拣货页面 S -------------------
    // 提交返回
    pickingReturn() {
      this.pickViewItem = {
        pickTaskId: "",
        itemCode: "", // 物料编码
        itemName: "", // 物料编码
        boxCode: "", // 推荐容器
        cellCode: "", // 所属库位
        pickQuantity: "", // 容器内数量
        pickQty: "", // 拣货数量
      };
      this.recommendList = [];
      this.currentWaveItem = {};
      this.$refs.pickingForm.reset();
      this.tab = 0;
      this.getWaveData();
    },

    clickItem(item, e) {
      // console.log(item)
      // console.log(JSON.stringify(item))
      if (confirm("确认对容器：" + item.boxCode + "进行拣货?")) {
        this.pickForm.srcBoxCode = item.boxCode;
        let srcBoxCode = this.pickForm.srcBoxCode;
        // this.recommendList.forEach((item) => {
        //   if (item.boxCode == srcBoxCode && item.state == 0) {
        //     this.pickForm.pickTaskId = item.pickTaskId;
        //     this.pickForm.pickQuantity = item.pickQuantity;
        //     this.pickForm.actQuantity = item.pickQuantity;
        //   }
        // });
        //查询容器库存
        this.overlay = true;
        wms
          .get({
            url: "/pick/tasks/getBoxStock",
            data: {
              boxCode: item.boxCode,
              pickTaskId: item.pickTaskId
            },
          })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              let invt = res.data.data;
              ;
              this.pickForm.actQuantity = item.pickQuantity;
              this.pickForm.pickTaskId = item.pickTaskId;
              //判断是不是整个容器都拣
              // if (invt.quantity == this.pickForm.pickQuantity) {
              //   this.pickForm.isAllPick = true;
              //   this.targetCtCodeDisabled = false;
              // } else {
              //   this.pickForm.isAllPick = false;
              //   //需要输入目标容器和数量
              //   this.targetCtCodeDisabled = false;
              //   // this.pickForm.actQuantity = invt.quantity;
              //     // document.getElementById("id-toBoxCode").focus();
              // }
              this.overlay = false;
            } else {
              this.overlay = false;
              alert(res.data.message);
            }
          });
      }
    },

    //生成容器
    // generateBoxCode() {
    //   //校验是否已经录入数据
    //   this.overlay = true;
    //   wms
    //     .get({ url: "/box/infos/generate", data: { count: 1 } })
    //     .then((res) => {
    //       if (res.status == 200 && res.data.code == 200) {
    //         let ctBoxList = res.data.data;
    //         this.pickForm.toBoxCode = ctBoxList[0];
    //         this.overlay = false;
    //       } else {
    //         this.overlay = false;
    //       }
    //     });
    // },

    onReachBottom() {
      alert(111)
    },

    // 拣货容器查询
    handleEnterCtCode() {
      //拣货容器
      let srcBoxCode = this.pickForm.srcBoxCode;
      this.recommendList.forEach((item) => {
        if (item.boxCode == srcBoxCode && item.state == 0) {
          this.pickForm.pickTaskId = item.pickTaskId;
          this.pickForm.pickQuantity = item.pickQuantity;
        }
      });
      //查询容器库存
      this.overlay = true;

      wms
        .get({
          url: "/inventorys/getBoxStock",
          data: { boxCode: this.pickForm.srcBoxCode },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            let invt = res.data.data;


            //判断是不是整个容器都拣
            if (invt.quantity == this.pickForm.pickQuantity) {
              this.pickForm.isAllPick = true;
            } else {
              this.pickForm.isAllPick = false;
              //需要输入目标容器和数量
              this.targetCtCodeDisabled = false;
              document.getElementById("id-toBoxCode").focus();
            }
            this.overlay = false;
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },

    saveDiffQty() {
      // console.log(111);
      this.msgDialog = false;
    },
    openDiffQtyDig() {
      this.msgDialog = true;
    },

    // -----------------------拣货页面 容器详情 E -------------------
    // 拣货提交
    pickingSubmit() {
      if (!this.pickForm.srcBoxCode) {
        alert("请先扫描拣货容器");
        return false;
      }

      if (!this.pickForm.isAllPick && !this.pickForm.actQuantity) {
        alert("请先录入目标容器和数量");
        return false;
      }

      //校验提交的数量必须要等于推荐的数量
      // if (
      //   this.pickForm.actQuantity &&
      //   this.pickForm.actQuantity != this.pickForm.pickQuantity
      // ) {
      //   alert(
      //     "实际拣货数量[" +
      //       this.pickForm.actQuantity +
      //       "]不等于计划拣货数量[" +
      //       this.pickForm.pickQuantity +
      //       "]"
      //   );
      //   return false;
      // }

      let diffQty = 0;
      if (this.pickForm.diffMoreQty) {
        diffQty = diffQty + parseFloat(this.pickForm.diffMoreQty);
      } else if (this.pickForm.diffLessQty) {
        diffQty = diffQty - parseFloat(this.pickForm.diffMoreQty);
      }
      let params = {
        wareId: localStorage.getItem("wareId"),
        pickTaskId: this.pickForm.pickTaskId,
        pickQuantity: this.pickForm.pickQuantity,
        srcBoxCode: this.pickForm.srcBoxCode,
        toBoxCode: this.pickForm.toBoxCode,
        diffQty: diffQty,
      };

      console.log(JSON.stringify(params));
      this.overlay = true;
      wms
        .post({
          url: "/pick/tasks/commitPick",
          data: params,
        })
        .then((res) => {
          console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            //更新拣货数量
            this.currentWaveItem.currentUnPickNum -= 1;
            //提交成功
            this.pickForm = {};
            this.overlay = false;
            // window.api.toast({ msg: "拣货成功", location: "middle" });
            alert("拣货成功");
            this.picking(this.currentWaveItem);
            //回写已拣货数量
            // for (let i = 0; i < this.outBillForm.details; i++) {
            //   if (
            //     this.outBillForm.details[i].itemCode ==
            //     this.currentWaveItem.itemCode
            //   ) {
            //     this.outBillForm.details[i].quantity +=
            //       this.pickForm.pickQuantity;
            //     break;
            //   }
            // }
            //待拣容器数量为0则跳转
            if (this.currentWaveItem.currentUnPickNum == 0) {
              this.pickingReturn();
            }
          } else {
            this.overlay = false;
            alert(res.data.message);
          }
        });
    },
    // -----------------------拣货页面 E -----------------------
    getWaveData() {
      this.overlay = true;
      wms
        .get({
          url: "/wave/details/list/pick",
          data: this.serchData,
        })
        .then((res) => {
          // console.log(JSON.stringify(res));
          // console.log(res.data);
          this.overlay = false;
          if (res.status == 200 && res.data.code == 200) {
            if (res.data.data.total == 0) {
              this.$root.api.api.toast({ msg: "无数据", location: "middle" });
            }
            this.cacheList = res.data.data.list;
            this.waveList = this.cacheList.slice(0, 10);
            this.waveList.forEach(item => {
              item.Check = false;
            });
            console.log(this.waveList);
          } else {
            alert(res.data.message);
          }
        });
    },
  },
  watch: {},

  mounted() {
    this.serchData.waveCode = this.$root.api.api.pageParam.waveCode;
    //按照登录人员，获取未完成的波次明细
    this.getWaveData();
  },
};
</script>


<style lang="scss" scoped>
body html{
  width: 100%;
  min-height: 100vh;
}
.v-tabs {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  ::v-deep .v-tabs-items {
    flex: 1;
    background-color: transparent;
    .v-window__container {
      height: 100%;
    }
  }
}

.footer {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.footer1 {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.list_content {
  flex-direction: column;
  padding: 8px;
  min-height: 5rem;
  .col {
    padding: 2px;
    min-height: 1rem;
    text-align: right;
  }
  .row {
    margin: 0;
    background-color: transparent !important;
  }
  .card-lable {
    text-align: left;
  }
  .card-value {
    text-align: left;
  }
}

.task {
  // padding-bottom: 56px;
  overflow: auto;
  &_from {
    background-color: #fff;
    margin-bottom: 6px;
    .v-text-field ::v-deep.v-input__prepend-inner {
      margin-top: 8px;
      display: flex;
      font-size: 0.875rem;
      min-width: 4rem;
      .v-input__append-inner .v-btn {
        padding: 0 10px;
        margin-bottom: 2px;
        .col {
          padding-bottom: 6px;
        }
      }
    }
    &_list .v-card__subtitle .row + .row {
      margin-top: 6px;
      justify-content: flex-end;
      padding-right: 10px;
      .col {
        padding: 6px 8px;
      }
    }
  }
  &_list {
    // height: 100%;
    // padding-top: 40px;
  }
}
.v-card__subtitle {
  display: flex;
  margin: 0;

  .row {
    margin: 0;
    background-color: #fff;
    .col {
      min-height: 1rem;
      padding: 8px;
    }
    .receiving_heard {
      border-top: 1px solid grey;
      font-size: 16px;
      font-weight: bold;
    }
    .row {
      background-color: inherit;
    }
  }
}

.v-card__text {
  padding: 0 10px !important;
  .row {
    margin: 0;
  }
  .col {
    padding: 8px;
    ::v-deep.v-input__prepend-outer {
      min-width: 2rem;
      margin-top: 10px;
    }
  }
}
.pickingCard {
  // background-color: skyblue;
  border-radius: 8px;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 20%), 3px 3px 6px rgb(0 0 0 / 14%),
    3px 3px 6px rgb(0 0 0 / 12%) !important;
  .col {
    padding: 0;
  }
  .row {
    margin: 0;
    .col {
      height: 24px;
      font-size: 13px;
      line-height: 24px;
      color: #979899;
    }
    .pickingCard_title {
      font-size: 15px;
      font-weight: bold;
      color: #f8a73c;
    }
  }
  .v-input--selection-controls {
    margin-top: 8px;
  }
  // 10px 10px 5px #888888
}
.pickingCard-bottom {
  background-color: #fff;
  .col {
  }
}
.btn-left {
  background-color: #fff !important;
  ::v-deep.v-btn__content {
    color: #193690 !important;
  }
}
.pickingForm {
  .row {
    margin: 0;
    .col {
      padding-bottom: 0;
      padding-top: 0;
    }
  }
}

.pickingWrap {
  padding-bottom: 66px;
}

::v-deep.navigationBtns .navigationBtns_return .v-btn__content {
  color: #193690;
}

::v-deep.v-bottom-navigation .v-btn__content {
  color: #fff;
  font-size: 1rem;
}

.inputPlaceholder ::v-deep.v-text-field__slot input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {
  font-size: 15px;
}
.boxCodeDialog_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .boxCodeDialog_card_title {
    width: 100%;
    padding-top: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffc352;
    color: #fff;
    // padding: 12px 24px 8px !important;
  }
  .v-card__text {
    margin-top: 12px;
    flex: 1;
  }
  #colnew {
    text-align: center !important;
  }
  .boxCodeDialog_card_table {
    ::v-deep .text-start {
      padding: 0 8px !important;
    }
  }
  .v-card__actions {
    width: 100%;
  }
  #btnwarepick {
    min-width: 180px !important;
    height: 35px !important;
  }
  .msgDialog_card_title {
    padding: 12px 24px 10px !important;
  }
}
</style>
